<template>
  <el-card class="box-card" shadow="never" style="border:none; margin-top:0;flex-grow: 3;flex-basis: 0; padding: 0px">
    <div slot="header" class="clearfix" style="display: flex; align-items: center; justify-content: space-between;">
      <span style="flex-grow: 3">{{ kpiPartyVO.title }}赛福斯特公司党支部党建考核KPI</span>
    </div>

    <!-- KPI表 -->
    <el-table
        :data="primaryIndicatorVOS"
        border
        style="width: 100%"
        header-cell-class-name="header-center"
    >
      <!-- 序号列 -->
      <el-table-column
          type="index"
          label="序号"
          width="60">
      </el-table-column>

      <el-table-column label="党建KPI">
        <!-- 第一列 -->
        <el-table-column
            label="一级指标"
            prop="column1" width="300px">
          <template slot="header" slot-scope="scope">
            <span>{{ scope.column.label }}</span>
          </template>
          <template slot-scope="scope">
            <el-input
                type="textarea"
                v-model="scope.row.primaryIndicator"
                :readonly="!scope.row._editing"
                :autosize="{ minRows: 1, maxRows: 6 }"
                :class="{
                  'focus-input': scope.row._editing
                }"
            ></el-input>
          </template>
        </el-table-column>

        <!-- 第二列 -->
        <el-table-column
            label="指标要点"
            prop="column2" width="300px">
          <template slot="header" slot-scope="scope">
            <span>{{ scope.column.label }}</span>
          </template>
          <template slot-scope="scope">
            <el-input
                type="textarea"
                v-model="scope.row.indicatorPoint"
                :readonly="!scope.row._editing"
                :autosize="{ minRows: 1, maxRows: 6 }"
                :class="{
                  'focus-input': scope.row._editing
                }"
            ></el-input>
          </template>
        </el-table-column>

        <!-- 第三列 -->
        <el-table-column
            label="具体内容"
            prop="column3">
          <template slot="header" slot-scope="scope">
            <span>{{ scope.column.label }}</span>
          </template>
          <template slot-scope="scope">
            <el-input
                type="textarea"
                v-model="scope.row.indicatorDetail"
                :readonly="!scope.row._editing"
                :autosize="{ minRows: 1, maxRows: 6 }"
                :class="{
                  'focus-input': scope.row._editing
                }"
            ></el-input>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              @click="editRow('kpi', scope.$index)"
              :disabled="scope.row._editing"
          >编辑
          </el-button>
          <el-button
              size="mini"
              type="text"
              @click="saveRow('kpi', scope.$index)"
              :disabled="!scope.row._editing"
          >保存
          </el-button>
          <el-button
              size="mini"
              type="text"
              @click="deleteRow('kpi', scope.$index)"
          >删除
          </el-button>
          <el-button
              size="mini"
              type="text"
              @click="addRow('kpi', scope.$index)"
          >增加行
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 党建工作计划表 -->
    <el-table :data="primaryIndicatorPlanVOS" border style="width: 100%" header-cell-class-name="header-center">
      <!-- 序号列 -->
      <el-table-column
          type="index"
          label="序号"
          width="60">
      </el-table-column>
      <el-table-column label="党建工作计划">
        <!-- 第一列 -->
        <el-table-column
            label="一级指标"
            prop="column1" width="300px">
          <template slot="header" slot-scope="scope">
            <span>{{ scope.column.label }}</span>
          </template>
          <template slot-scope="scope">
            <el-input
                type="textarea"
                v-model="scope.row.primaryIndicator"
                :readonly="!scope.row._editing"
                :autosize="{ minRows: 1, maxRows: 6 }"
                :class="{
                  'focus-input': scope.row._editing
                }"
            ></el-input>
          </template>
        </el-table-column>

        <!-- 第二列 -->
        <el-table-column
            label="指标要点"
            prop="column2" width="300px">
          <template slot="header" slot-scope="scope">
            <span>{{ scope.column.label }}</span>
          </template>
          <template slot-scope="scope">
            <el-input
                type="textarea"
                v-model="scope.row.indicatorPoint"
                :readonly="!scope.row._editing"
                :autosize="{ minRows: 1, maxRows: 6 }"
                :class="{
                  'focus-input': scope.row._editing
                }"
            ></el-input>
          </template>
        </el-table-column>

        <!-- 第三列 -->
        <el-table-column
            label="基本工作"
            prop="column3">
          <template slot="header" slot-scope="scope">
            <span>{{ scope.column.label }}</span>
          </template>
          <template slot-scope="scope">
            <el-input
                type="textarea"
                v-model="scope.row.indicatorDetail"
                :readonly="!scope.row._editing"
                :autosize="{ minRows: 1, maxRows: 6 }"
                :class="{
                  'focus-input': scope.row._editing
                }"
            ></el-input>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              @click="editRow('plan', scope.$index)"
              :disabled="scope.row._editing"
          >编辑
          </el-button>
          <el-button
              size="mini"
              type="text"
              @click="saveRow('plan', scope.$index)"
              :disabled="!scope.row._editing"
          >保存
          </el-button>
          <el-button
              size="mini"
              type="text"
              @click="deleteRow('plan', scope.$index)"
          >删除
          </el-button>
          <el-button
              size="mini"
              type="text"
              @click="addRow('plan', scope.$index)"
          >增加行
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row style="font-size: 12px">
      <el-col><span>党(总)支部书记:</span></el-col>
      <el-col><span>党委书记:</span></el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: "EditKPI",
  data() {
    return {
      id: this.$route.params.id,
      kpiPartyVO: {},
      primaryIndicatorVOS: [],
      primaryIndicatorPlanVOS: [],
    }
  },
  methods: {
    // 树形数据转换为表格数据
    treeToKpiTable(raw) {
      const result = []
      raw.primaryIndicatorVOS.forEach(primary => {
        primary.indicatorPointVOS.forEach(point => {
          point.indicatorDetailVOS.forEach(detail => {
            result.push({
              primaryIndicator: primary.name,
              indicatorPoint: point.name,
              indicatorDetail: detail.content,
              _col1Key: primary.name,
              _col2Key: primary.name + '-' + point.name,
              _col3Key: detail.id,
              _editing: false,
              _hover: false // 鼠标悬浮状态
            })
          })
        })
      })
      return result
    },
    treeToPlanTable(raw) {
      const result = []
      raw.primaryIndicatorPlanVOS.forEach(primary => {
        primary.indicatorPointPlanVOS.forEach(point => {
          point.indicatorDetailPlanVOS.forEach(detail => {
            result.push({
              primaryIndicator: primary.name,
              indicatorPoint: point.name,
              indicatorDetail: detail.content,
              _col1Key: primary.name,
              _col2Key: primary.name + '-' + point.name,
              _col3Key: detail.id,
              _editing: false,
              _hover: false // 鼠标悬浮状态
            })
          })
        })
      })
      return result
    },

    addRow(table, rowIndex) {
      const tableData = table === 'kpi' ? this.primaryIndicatorVOS : this.primaryIndicatorPlanVOS
      const newRow = {
        primaryIndicator: '',
        indicatorPoint: '',
        indicatorDetail: '',
        _col1Key: 'new',
        _col2Key: 'new',
        _col3Key: 'new',
        _editing: true,
        _hover: false
      }
      tableData.splice(rowIndex + 1, 0, newRow)
    },
    editRow(table, rowIndex) {
      const tableData = table === 'kpi' ? this.primaryIndicatorVOS : this.primaryIndicatorPlanVOS
      tableData.forEach(row => row._editing = false)
      tableData[rowIndex]._editing = true
    },
    deleteRow(table, rowIndex) {
      const tableData = table === 'kpi' ? this.primaryIndicatorVOS : this.primaryIndicatorPlanVOS
      tableData.splice(rowIndex, 1)
    },
    saveRow(table, rowIndex) {
      const tableData = table === 'kpi' ? this.primaryIndicatorVOS : this.primaryIndicatorPlanVOS
      tableData[rowIndex]._editing = false
      const rowData = tableData[rowIndex]
      console.log("发送给后端编辑行数据" + JSON.stringify(rowData, null, 2))
      const kpiItemDTO = {
        primaryIndicator: rowData.primaryIndicator,
        indicatorPoint: rowData.indicatorPoint,
        indicatorDetail: rowData.indicatorDetail,
        indicatorDetailId: rowData._colKey3
      }
      if (table === 'kpi') {
        this.$http.post("/kpi/indicatorKPI/update", kpiItemDTO).then((response) => {
          if (response.data.code == 1) {
            this.$message.success("更新完成")
          } else {
            this.$message.error("更新失败")
          }
        })
      } else {
        this.$http.post("/kpi/indicatorPlan/update", kpiItemDTO).then((response) => {
          if (response.data.code == 1) {
            this.$message.success("更新完成")
          } else {
            this.$message.error("更新失败")
          }
        })
      }
    }
  },
  mounted() {
    this.$http.get(`/kpi/detail/${this.id}`).then((kpiRes) => {
      if (kpiRes.data.code == 1) {
        this.kpiPartyVO = kpiRes.data.data
        this.primaryIndicatorVOS = this.treeToKpiTable(this.kpiPartyVO)
        this.primaryIndicatorPlanVOS = this.treeToPlanTable(this.kpiPartyVO)
      }
    })
  }
}
</script>

<style scoped>
::v-deep .headerCell {
  text-align: center !important;
  font-weight: bold;
  color: #545454;
  border: 1px solid #989898 !important;
}

::v-deep .headerRow {
  background: transparent !important;
}

::v-deep .el-table__header {
  border-collapse: collapse;
}

::v-deep .el-table__cell .el-input__content {
  white-space: normal !important; /* 自动换行 */
  word-break: break-word !important; /* 单词断行 */
}

::v-deep .focus-input {
  border-bottom: 1px solid #1989FA !important; /* 编辑状态下的边框颜色 */
}

::v-deep .el-textarea__inner {
  border: none;
  resize: none;
  font-size: 11px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>
